
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
	<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>
	
<style>
	.kuan{ width: 100%; overflow: hidden; float: left; margin: 5px; }
	.bg{ background: none; border: none;}
	label{ font-size: 16px;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
.upviewer img{ height:90px; width: 120px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8); }


</style>

<div class="panel panel-default">
	  <div class="panel-heading">添加</div>
	  <div class="panel-body" style=" padding:0px 20%;">
	    
		<form action="{:U('Apt/listimgadd')}" method="post" id="add" onsubmit="return validation()">				
		 <div class="kuan">
		    <div class="form-group" >	    	
		   		 <label for="ms" >描述:</label> 				
		    	 <input type="text" class="form-control" id="ms" name="ms" placeholder="描述"> <br />     	
		  </div>
		   </div>
		   
		   <div class="kuan">
		   <div class="form-group" >	    	
		   		 <label for="url" >跳转链接:</label> 				
		    	 <input type="text" class="form-control" id="url" name="url" placeholder="例子：http://baidu.com"> <br />     	
		  </div>
		   </div>	
			
		   <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="listimg" >轮播图:</label> 				
		    	 <input type="file" class="form-control" id="upload" placeholder="列表轮播图"> <br /> 
		    	  <input type="hidden" name="img"  id="img"> 
		    		<div id="view" class=" upviewer" >
						
					</div>
		  </div>
		   </div>			 
			
				<div class="col-sm-4" style="padding:30px 0px;">
		  <button type="submit" class="btn btn-primary">保存</button>
		  </div>
		</form>
		 </div>  
	  </div>
	
	

<script type="text/javascript">

$(function(){
	initDelFile();
	//多文件上传
	initUploadify({ ID:'upload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
});

function initDelFile(){
	$('#view li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
				$(_this).parents('li').remove();
			} 
		},'json');
	});
}
//验证	
	function validation(){
		
		var	ms=$('#ms').val();//写入值	
		if(ms=="")
		{
			alert('请填写描述');
			 return false; 
		}
		
		var img=$('#view').html().trim();//获取值			
		var	listimg=$('#img').val(img);//写入值	
		var listnum=document.getElementById("view").getElementsByTagName("img");//验证数量
		if(img=="")
		{
			alert('请上传轮播图');
			 return false; 
		}
		if(listnum.length>1)
		{
			alert('请上传一张');
			 return false; 
		}
		
		
		 return true; 
	
	}


</script>